<template>
  <div class="emotion-grid">
    <slider :list="emotionList" :autoPlay="false" :loop="false">
      <grid :cols="7" v-for="(line, index1) in emotionList" :key="index1">
        <grid-item v-for="(item, index) in line" :key="index" @click.native="clickEmotion(item)">
          <div class="item">{{item}}</div>
        </grid-item>
      </grid>
    </slider>
  </div>
</template>

<script>
import { Grid, GridItem } from 'vux'
import Slider from '../slider/slider'

export default {
  components: {
    Grid,
    GridItem,
    Slider
  },
  data () {
    return {
      emotionList: [
        ['😂', '🙏', '😄', '😏', '😇', '😅', '😌', '😘', '😍', '🤓', '😜', '😎', '😊', '😳', '🙄', '😱', '😒', '😔', '😷', '👿', '🤗', '😩', '😤', '😣', '😰', '😴', '😬', '😭'],
        ['👻', '👍', '✌️', '👉', '👀', '🐶', '🐷', '🤖', '⚡️', '🔥', '🌈', '🍏', '⚽️', '❤️', '🚘', '🌲', '🌚', '🌝', '🌰', '🦁', '🐼']
      ]
    }
  },
  methods: {
    clickEmotion (type) {
      this.$emit('clickEmotion', type)
    }
  }
}
</script>

<style>
.emotion-grid .weui-grid {
  text-align: center;
  padding: 8.5px 0;
}
.emotion-grid .weui-grids:after {
  border-left: none;
}
.emotion-grid .weui-grid:before, .emotion-grid .weui-grid:after {
  border-bottom: none;
  border-right: none;
}
.emotion-grid .slide .dots {
  bottom: 12px;
  text-align: center;
}
.emotion-grid .slide .dots .dot.active {
  background: green;
  width: 8px;
}
</style>

<style lang="stylus" scoped>
.emotion-grid {
  padding-bottom: 12px;
  .item {
    font-size: 22px;
  }
}
</style>
